<!-- login组件 -->
<template>
  <div class="login">
    <!-- 内容 -->
    <div class="login_content">
      <p><span>SOM</span>管理系统</p>
      <div class="login_content_box">
        <div class="login_content_box_user">
          <i class="iconfont icon-user"></i>
        </div>
        <div class="from_box">
          <el-form
            :model="loginForm"
            status-icon
            :rules="loginFormRules"
            ref="loginForm"
            label-width="80px"
          >
            <el-form-item label="用户名" prop="username">
              <el-input
                prefix-icon="el-icon-user"
                type="username"
                v-model="loginForm.username"
                autocomplete="off"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                prefix-icon="el-icon-lock"
                type="password"
                v-model="loginForm.password"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <div class="btn_box">
              <el-button type="info" @click="resetForm()" class="login_btn"
                >重置</el-button
              >
              <el-button type="primary" @click="login()" class="login_btn"
                >登录</el-button
              >
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getLoginData } from "../service/login";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      //表单数据
      loginForm: {
        username: "admin",
        password: "123456",
      },
      //表单校验规则
      loginFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 4, max: 8, message: "长度在4到8个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //表单提交
    login() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          getLoginData(this.loginForm).then(
            (res) => {
              console.log(res);
              if (res.meta.status != 200)
                return this.$message.error("登陆失败！");
              this.$message.success("登陆成功！");
              //将token存到sessionStorage中
              window.sessionStorage.setItem("token", res.data.token);
              //跳转home页
              this.$router.push("/home");
            }
          );
        } else {
          return false;
        }
      });
    },
    //清除表单
    resetForm() {
      this.$refs.loginForm.resetFields();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.login {
  align-items: center;
  width: 100%;
  height: 100%;
  background-image: url("../assets/images/img/main_bg.png");
  background-repeat: no-repeat;
  background-position: center 50%;
  display: flex;
  justify-content: center;
  .login_content {
    margin: 0 auto;
    margin-top: -150px;
    width: 800px;
    height: 600px;
    background-color: rgba($color: #000, $alpha: 0.1);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    p {
      width: 100%;
      font-size: 32px;
      color: #545c64;
      text-align: center;
      height: 42px;
      line-height: 42px;
      span {
        color: #1296db;
      }
    }
    .login_content_box_user {
      width: 100px;
      height: 100px;
      background-color: rgba($color: #fff, $alpha: 0.75);
      border-radius: 50%;
      position: absolute;
      left: 165px;
      top: -50px;
      border: 10px solid #93defe;
      background-color: #fff;
      text-align: center;
      i {
        margin-bottom: 5px;
        font-size: 82px;
        color: #aaa;
      }
    }
    .login_content_box {
      width: 450px;
      height: 300px;
      background-color: rgba($color: #f5f5f5, $alpha: 1);
      border-radius: 10px;
      position: relative;
      .from_box {
        margin-top: 100px;
        display: flex;
        justify-content: center;
        .el-form-item {
          margin-right: 15px;
        }
        .el-input {
          width: 300px;
        }
        .btn_box {
          margin: 0 0 0 80px;
          width: 300px;
          display: flex;
          justify-content: space-between;
          .login_btn {
            width: 120px;
          }
        }
      }
    }
  }
}
</style>
